<template>
    <div>
        <h1>添加{{ clazzName }}班课程安排</h1>
        <el-form :model="form" label-width="120px" @submit.prevent="submitForm">
            <el-table :data="courseSchedules" style="width: 100%; margin-bottom: 20px;">
                <el-table-column prop="courseName" label="课程名称" />
                <el-table-column prop="week" label="周数" />
                <el-table-column prop="day" label="星期几" />
                <el-table-column prop="startPeriod" label="开始节次" />
                <el-table-column prop="endPeriod" label="结束节次" />
                <el-table-column>
                    <template #default="scope">
                        <el-button type="danger" size="small" @click="removeSchedule(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-form-item label="课程名称">
                <el-input v-model="newSchedule.courseName" placeholder="请输入课程名称" />
            </el-form-item>
            <el-form-item label="周数">
                <el-input-number v-model="newSchedule.week" :min="1" />
            </el-form-item>
            <el-form-item label="星期几">
                <el-input-number v-model="newSchedule.day" :min="1" :max="7" placeholder="请选择星期几" />
            </el-form-item>
            <el-form-item label="开始节次">
                <el-input-number v-model="newSchedule.startPeriod" :min="1" />
            </el-form-item>
            <el-form-item label="结束节次">
                <el-input-number v-model="newSchedule.endPeriod" :min="1" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addSchedule">添加课程安排</el-button>
                <el-button type="success" @click="submitForm">提交所有安排</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import service from '@/api';
export default {
    data() {
        return {
            clazzId: null,
            clazzName: '',
            courseSchedules: [],
            newSchedule: {
                id: 0,
                courseName: '',
                week: 1,
                day: 1,
                startPeriod: 1,
                endPeriod: 1
            }
        }
    },
    created() {
        this.clazzId = this.$route.params.clazzId;
        this.fetchClazzName();
    },
    methods: {
        async fetchClazzName() {
            const clazz = await service.get(`/api/clazz/${this.clazzId}`, null, "获取班级信息");
            this.clazzName = clazz.name;
        },
        addSchedule() {
            this.courseSchedules.push({ ...this.newSchedule });
            this.newSchedule = {
                id: 0,
                courseName: '',
                week: 1,
                day: 1,
                startPeriod: 1,
                endPeriod: 1
            };
        },
        removeSchedule(index) {
            this.courseSchedules.splice(index, 1);
        },
        async submitForm() {
            const data = this.courseSchedules.map(schedule => ({
                clazzId: this.clazzId,
                courseName: schedule.courseName,
                courseScheduleTime: {
                    week: schedule.week,
                    day: schedule.day,
                    startPeriod: schedule.startPeriod,
                    endPeriod: schedule.endPeriod
                }
            }));
            await service.post('/api/courses_schedule', data, "导入课程安排");
            this.$message.success('课程安排添加成功！');
            this.courseSchedules = [];
        }
    }
}
</script>

<style scoped>
form div {
    margin: 10px 0;
}

label {
    display: inline-block;
    width: 80px;
}

input,
select {
    padding: 5px;
    width: 200px;
}

button {
    padding: 10px 20px;
    background-color: #42b983;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #3aa876;
}
</style>